<template>
  <div class="product-detail-container">
    <div class="product-box">
      <div class="product-img">
        <van-image
          width="100%"
          height="200"
          fit="cover"
          :src="product.imageLarge"
        />
      </div>
        <div class="product-info-section">
          <van-skeleton title :loading="!product.name" :row="3">
            <div class="product-name">{{ product.name }}</div>
            <div class="product-desc">{{ product.desc }}</div>
            <div class="product-price-box" v-if="product.price">
              <span class="price"><small>￥</small>{{ product.price }}</span>
              <span class="inventory">库存{{ product.inventory }}件</span>
            </div>
          </van-skeleton>
        </div>
    </div>
    <div class="product-action">
      <div class="action-btn-group">
        <div class="action-btn" @click="toCart">
          <van-icon name="shopping-cart-o" size="20" :badge="cartCount"/>
        </div>
        <div class="action-btn" @click="toHome">
          <van-icon name="home-o" size="20"/>
        </div>
      </div>
      <div class="radius-btn-group">
        <van-button class="radius-btn radius-btn-left" @click="onCartClick">加入购物车</van-button>
        <van-button class="radius-btn radius-btn-right" @click="onBuyClick">立即购买</van-button>
      </div>
    </div>
    <van-popup class="product-popup" v-model="showPopup" position="bottom">
      <div class="brief-info">
        <div class="brief-img">
          <van-image
            width="50"
            height="50"
            fit="cover"
            :src="product.image"
          />
        </div>
        <div class="brief-price-section">
          <div class="brief-name">{{ product.name }}</div>
          <div class="brief-price">{{ product.price }}</div>
        </div>
        <div class="brief-close" @click="onBriefClose">
          <van-icon name="close"/>
        </div>
      </div>
      <div class="brief-attribute">
        <span class="brief-num">购买数量</span>
        <span class="brief-inv">库存{{ product.inventory }}件</span>
        <van-stepper class="brief-step" v-model="count" :max="product.inventory || 10"/>
      </div>
      <div class="brief-action">
        <van-button class="vant-red-grd-btn" round block @click="onConfirm">
          {{ isToCart ? '确认' : '立即购买' }}
        </van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { Popup, Image as VanImage, Skeleton } from 'vant'

Vue.use(Popup)
Vue.use(VanImage)
Vue.use(Skeleton)

export default {
  name: 'ProductDetail',
  data () {
    return {
      product: {},
      showPopup: false,
      isToCart: true, // 判断是否入购物车
      count: 1
    }
  },
  computed: {
    cartCount () {
      return this.$store.getters.cartCount || 0
    }
  },
  created () {
    this.fetchProduct()
  },
  methods: {
    fetchProduct () {
      this.$api.get({
        url: 'product/query.action',
        params: {
          id: this.$route.query.id
        }
      }).then((result) => {
        this.product = result
      }).catch((err) => {
        this.$toast(err.message)
      })
    },
    onBriefClose () {
      this.showPopup = false
    },
    onCartClick () {
      this.showPopup = true
      this.isToCart = true
    },
    onBuyClick () {
      this.showPopup = true
      this.isToCart = false
    },
    onConfirm () {
      const { isToCart } = this

      if (isToCart) {
        this.addToCart()
      } else {
        this.toPreviewOrder()
      }
    },
    addToCart () {
      this.$store.dispatch('addToCart', {
        ...this.product,
        count: this.count
      })
        .then(() => {
          console.log(this.$store.state.cart)
          this.showPopup = false
        })
        .catch((err) => {
          this.showPopup = false
          this.$toast(err.message)
        })
    },
    // 订单结算
    toPreviewOrder () {
      this.$api.post('order/previewOrder.action', {
        data: {
          products: [{
            ...this.product,
            count: this.count
          }]
        }
      })
        .then(() => {
          this.$router.push({ path: '/order/preview' })
        })
        .catch((err) => {
          this.$toast(err.message)
        })
    },
    toCart () {
      this.$router.push({ path: '/cart' })
    },
    toHome () {
      this.$router.push({ path: '/home' })
    }
  }
}
</script>

<style lang="less">
  .product-detail-container {
    .product-box {
      margin: 10px;
      background: #fff;
      border-radius: 5px;
      overflow: hidden;
    }

    .product-img {
      width: 100%;
      display: flex;
    }

    .product-price-box {
      margin: 10px 10px 0 10px;
      display: flex;
      justify-content: space-between;

      .price {
        font-size: 18px;
        color: red;

        small {
          font-size: 12px;
        }
      }

      .inventory {
        font-size: 14px;
        color: #666;
      }
    }

    .product-info-section {
      padding: 10px 0;
    }

    .product-name {
      margin: 0 10px;
      font-weight: bold;
      height: 20px;
      line-height: 20px;
    }

    .product-desc {
      margin: 10px 5px 0 10px;
      color: #666666;
      height: 40px;
    }

    .product-action {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      width: 100%;
      height: 60px;
      display: flex;
      background: #fff;
      justify-content: space-between;
      align-items: center;

      .action-btn-group {
        display: flex;
      }

      .action-btn {
        border-right: 1px solid #ccc;
        width: 50px;
        line-height: 60px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-content: center;

        .vant-icon {
          width: 40px;
        }
      }

      .radius-btn-group {
        margin-right: 10px;
        display: flex;
        width: 200px;

        .radius-btn {
          height: 40px;
          border: none;
          color: #fff;
          flex: 1;
        }
      }

      .radius-btn-left {
        border-radius: 20px 0 0 20px;
        background: linear-gradient(to right, #ffd01e, #ff8917);
      }

      .radius-btn-right {
        border-radius: 0 20px 20px 0;
        background: linear-gradient(to right, #ff6034, #ee0a24);
      }
    }

    .brief-info {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #ccc;
    }

    .brief-img {
    }

    .brief-price-section {
      flex: 1;
      padding: 0 10px;
    }

    .brief-name {

    }

    .brief-price {
      color: red;
      margin-top: 5px;
    }

    .brief-close {
      align-self: center;
    }

    .brief-attribute {
      display: flex;
      align-items: center;
      padding: 10px;
    }

    .brief-num {
      font-size: 16px;
      color: #333;
      margin-right: 5px;
    }

    .brief-inv {
      font-size: 14px;
      color: #666;
      flex: 1;
    }

    .brief-step {
      justify-self: right;
    }

    .brief-action {
      padding: 10px;
    }
  }
</style>
